import { useLayoutEffect } from 'react'

import { TType } from './interface'
import styles from './styles.module.less'

export const SCROLL_BOX_ID = 'FBA_Track'

export const inpTip = 'Press Enter to separate multiple IDs'
export const emptyDesc = 'No data'

export const useCommon = (page: 'home' | 'list') => {
  useLayoutEffect(() => {
    document.documentElement.classList.add(styles[`page_${page}`])
    return () => document.documentElement.classList.remove(styles[`page_${page}`])
  }, [page])
}

export const rmSeparator = (value: string) => value.replace(/!+/g, '')

export const inpValueParse = (value: string) => {
  const list = value
    .trim()
    .replace(/!+/g, '\n')
    .split(/\s*\n+\s*/)
    .filter(Boolean)
  const listVal = list.join('\n')
  const listJoin = list.join('!')
  const listJoinEncode = encodeURIComponent(listJoin)
  return { list, listVal, listJoin, listJoinEncode }
}

export const searchValueParse = (value: string) => {
  const list = value
    .trim()
    .replace(/!+/g, '!')
    .split('!')
    .map(v => v.trim())
    .filter(Boolean)
  const listVal = list.join('\n')
  const listJoin = list.join('!')
  const listJoinEncode = encodeURIComponent(listJoin)
  return { list, listVal, listJoin, listJoinEncode }
}

export const reqToList = (req: { waybillNos?: string[]; fbaIds?: string[] }) => {
  const arr1 = (req.waybillNos || []).map(value => ({ type: 'waybillNos' as TType, value }))
  const arr2 = (req.fbaIds || []).map(value => ({ type: 'fbaIds' as TType, value }))
  return [...arr1, ...arr2]
}
